body,ul,li,p,h3 {margin: 0;padding: 0}
ul,ol {list-style: none;}

.wrapper{
    width: 938px;
    height: 128px;
    border:1px solid #d3d3d3;
}


.wrapper li{width: 156px;height: 128px;float: left;overflow: hidden;}
.wrapper li a{display: block;height: 128px;width: 156px;position: relative;overflow: hidden;text-decoration: none;}
.wrapper img{position: absolute;bottom: 0;right: -15px;height: 72px;width: 117px;}
.wrapper .info{position: absolute;top: 0;left: 0;width: 136px;padding:4px 10px;}
.wrapper .info h3{font-size: 14px;font-weight: 700;}
.wrapper .info p{color: #868686;font-size: 12px;height: 22px;line-height: 22px;width: 136px;overflow: hidden;}
.wrapper .info .price{font-size: 14px;font-style: italic;color: #fa2a5d;height: 35px;}
.wrapper .line{position: absolute;right: 0;width: 0;height: 128px;border:1px dashed #cacaca;}
.wrapper .mask{position: absolute;top: 0;left: 0;height: 128px;width: 156px;opacity: 0;background-color: #000;}
.wrapper:hover .mask{opacity: 0.15}


.wrapper ul *{transition:all linear 0.1s;}
.wrapper li.big, li.big a{width: 314px;}
.wrapper li.big img{width: 195px;height: 120px;right: 0;bottom: 0;}
.wrapper li.big .info{width: 290px;}
.wrapper li.big h3{font-size: 18px;}
.wrapper li.big p{font-size: 14px;width: 166px;}
.wrapper li.big p.price{font-size: 16px;padding-top: 7px;}
.wrapper li.big a:hover .mask{opacity: 0;}